<template>
  <div class="news">
    <div class="box">
      <div class="news-banner">
        <div class="banner-title">
          <h2>培训项目</h2>
          <h3>让您了解我们更多的业务能力</h3>
        </div>
      </div>
      <div class="training-container">
        
        <div class="news-list">
          <ArticlesList class="articlesList" :items="articlesItems"></ArticlesList>
		  <div class="page_box">
			  <Pagination :pageNo="pageInfo.pageNo" :pageSize="pageInfo.pageSize" :total="total"
			              @change-page="changePage" style="margin: 10px 0" />
		  </div>
          
          
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import HotNews from "@/components/news/HotNews.vue";
import NewsList from "@/components/news/NewsList.vue";
import ArticlesList from "@/components/column/ArticlesList.vue";
import { onMounted, reactive, ref } from "vue";
import { getNewsList, listRecomNews } from "@/api/news";
import { getColumnArticlesList } from "@/api/column";
import Pagination from "@/components/Pagination.vue";
import { getDictItems } from "@/api/dict";

const activeKey = ref("1");

const newsItems = ref<any>([]);
const articlesItems = ref<any>([]);
const pageInfo = ref<{
  categoryId: string;
  pageNo: number;
  pageSize: number;
  selectDate: string;
}>({
  categoryId: "1979372436520660994",
  // 当前页码
  pageNo: 1,
  // 当前每页显示多少条数据
  pageSize: 5,
  selectDate: "",
});
const singlePage = ref(false);
const recomNews = ref<Array<any>>([]);
const selectDate = ref<string>();
const hotNews = ref<Array<any>>([]);
const searchNews = ref<any>("");
const total = ref<number>(0);
const loading = ref<boolean>(false);
const dataSource = ref<any>([]);

async function handleSearch(val) {
  dataSource.value = [];
  if (!val) {
    return;
  }
  const res: any = await searchNewsList(val);
  dataSource.value = res.result;
  const newHtml = `<span style="color: red">${val}</span>`;
  dataSource.value.forEach((item) => {
    item.title = item.title.replace(val, newHtml);
    item.remark = item.remark.replace(val, newHtml);
  });
}

const tabCards = reactive([]);

onMounted(() => {
  getNewsType();
  getNewsItems();
  getRecomNewsList();
  getColumnArt();
});

async function getNewsType() {
  const newsType: any = await getDictItems("news_type");
  setOptionData(newsType?.result, tabCards);
}

function setOptionData(dictData, datas) {
  if (dictData.length > 0) {
    dictData.forEach((nat: any) => {
      datas.push({
        id: nat.value,
        name: nat.label
      });
    });
  }
}

/**
 * 选项卡切换
 * @param tab
 * @param event
 */
function handleClick(tab) {
  pageInfo.value.categoryId = tab;
  getNewsItems();
  getColumnArt();
}

async function getNewsItems() {
  loading.value = true;
  const res: any = await getNewsList(pageInfo.value);
  newsItems.value = res.result?.records;
  if (newsItems.value.pages == 1) {
    singlePage.value = true;
  }
  total.value = res.result?.total;
  loading.value = false;
}

async function getColumnArt() {
  loading.value = true;
  const res: any = await getColumnArticlesList(pageInfo.value);
  articlesItems.value = res.result?.records;
  if (articlesItems.value.pages == 1) {
    singlePage.value = true;
  }
  total.value = res.result?.total;
  loading.value = false;
}

function searchByDate() {
  pageInfo.value.pageNo = 1;
  pageInfo.value.selectDate = selectDate.value || "";
  getNewsItems();
}

async function getRecomNewsList() {
  let params = {
    pageNo: 1,
    pageSize: 4
  };
  const res: any = await listRecomNews(params);
  recomNews.value = res.result?.records;
}

function changePage(pageNo) {
  pageInfo.value.pageNo = pageNo;
  getNewsItems();
}
</script>
<style lang="less" scoped>
@hover_color: #3370ff;

.news_header {
  background-color: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(10px);
}


.news-banner {
  width: 100%;
  height: 160px;
  background: url("../../assets/img/news/newsbanner.jpg") 50% no-repeat;
  background-size: cover;
  text-align: center;
  padding-top: 30px;

  .banner-title {
    padding-bottom: 30px;

    h2 {
      font-size: 28px;
      line-height: 60px;
      font-weight: 600;
    }

    h3 {
      color: #828282;
      margin-top: 5px;
      font-size: 100%;
      font-weight: 400;
      font-variant: normal;
    }
  }
}

.training-container {
  max-width: 1200px;
  min-height: 580px;
  margin: 0 auto;

  .news-list {
    position: relative;
	padding:10px;
    // display: flex;
    justify-content: space-between;
  }

  


  .list-left {
    width: 100%;
  }

}

.ant-picker {
  padding: 4px 11px 4px !important;
}

.name {
  text-overflow: ellipsis;
  overflow: hidden;
  color: black;
}

.desc {
  font-size: 12px;
  color: #b4b4b4;
}
.articlesList{
	width:100%;
}
.page_box{
	width:100%;position:relative;
}
</style>
